<template>
	<view class="content">

		<z-paging ref="paging" bgColor="#29313c" @query="getList" v-model="list" :loading-more-enabled="false">
			<!-- #ifdef APP -->
			<NavBarCommon></NavBarCommon>
			<!-- #endif -->

			<view class="" slot="top">
				<view class="boxOne">
					<image src="/static/home/right.png" alt="" class="leftOne" @click="goBack" />
					<view class="rightOne">{{ $t('Rewardrecord') }}</view>
				</view>
			</view>


			<view class="bpxTwoMath">
				<!-- view -->
				<u-gap height="10"></u-gap>
				<view class="flex " style="justify-content: center;align-items: center;">
					<view class="" style="
			display: flex;
height: 60rpx;
background: #343D48;
border-radius: 8rpx;">
						<view @click="currentHandle(1)" :class="current == 1 ? 'active' : ''" style="
								padding: 10rpx;
				background-color: #343D48;
height: 60rpx;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 60rpx;">
							{{ $t('personalranking') }}
						</view>
						<view @click="currentHandle(2)" :class="current == 1 ? '' : 'active'" class="" style="
				padding: 10rpx;
				background-color: #343D48;
height: 60rpx;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 60rpx;">
							{{ $t('Allrankings') }}
						</view>
					</view>
				</view>
				<u-gap height="20"></u-gap>
				<!-- 个人 -->
				<view class="" v-if="current == 1">
					<view class="boxTwo" v-for="(item, index) in list" :key="index">
<!-- 						<view class="rankOne">
							<view class="Rank">{{ $t('ranking') }}</view>
							<image v-if="index + 1 == 1" src="/static/my/one.png" alt="" class="number" />
							<image v-if="index + 1 == 2" src="/static/my/two.png" alt="" class="number" />
							<image v-if="index + 1 == 3" src="/static/my/three.png" alt="" class="number" />
							<image v-if="index + 1 == 4" src="/static/my/four.png" alt="" class="number" />
							<image v-if="index + 1 == 5" src="/static/my/five.png" alt="" class="number" />
							<image v-if="index + 1 == 6" src="/static/my/six.png" alt="" class="number" />
							<image v-if="index + 1 == 7" src="/static/my/seven.png" alt="" class="number" />
							<image v-if="index + 1 == 8" src="/static/my/eight.png" alt="" class="number" />
							<image v-if="index + 1 == 9" src="/static/my/nine.png" alt="" class="number" />
							<image v-if="index + 1 == 10" src="/static/my/ten.png" alt="" class="number" />
						</view> -->
						<view class="rankTwo">
							<view class="Rank1">{{ $t('count') }}</view>
							<view class="math"
								style="max-width: 168rpx; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
								{{ item.amount }}NASY
							</view>
						</view>
						<view class="rankThree">
							<view class="Rank2">{{ $t('status') }}</view>
							<view class="math1 mathYellow" v-if="item.status == 'success'">已获得</view>
							<view class="math1 mathBlue" v-if="item.status == 'pending'">待释放</view>
							<view class="math1 mathRed" style="width: 90rpx;" v-if="item.status == 'failed'">失败</view>
						</view>
						<view class="rankFour">
							<view class="Rank3">{{ $t('time') }}</view>
							<view class="math2">{{ formatTime(item.created_at) }}</view>
						</view>
					</view>
				</view>
				<!-- 团队 -->
				<view class="" v-if="current == 2">
					<view class="boxTwo" v-for="(item, index) in list" :key="index">
						<view class="rankOne " style="width: 50px;">
							<view class="Rank">{{ $t('ranking') }}</view>
							<image v-if="index + 1 == 1" src="/static/my/one.png" alt="" class="number" />
							<image v-if="index + 1 == 2" src="/static/my/two.png" alt="" class="number" />
							<image v-if="index + 1 == 3" src="/static/my/three.png" alt="" class="number" />
							<image v-if="index + 1 == 4" src="/static/my/four.png" alt="" class="number" />
							<image v-if="index + 1 == 5" src="/static/my/five.png" alt="" class="number" />
							<image v-if="index + 1 == 6" src="/static/my/six.png" alt="" class="number" />
							<image v-if="index + 1 == 7" src="/static/my/seven.png" alt="" class="number" />
							<image v-if="index + 1 == 8" src="/static/my/eight.png" alt="" class="number" />
							<image v-if="index + 1 == 9" src="/static/my/nine.png" alt="" class="number" />
							<image v-if="index + 1 == 10" src="/static/my/ten.png" alt="" class="number" />
						</view>
						<view class="rankFour flex-1">
							<view class="Rank3">{{ $t('walletaddress') }}</view>
							<view class="math2">{{ formatPublicKey(item.address) }}</view>
						</view>
						<view class="rankTwo flex-1">
							<view class="Rank1">{{ $t('count') }}</view>
							<view class="math"
								style="max-width: 288rpx; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
								{{ item.amount || 0 }} NASY
							</view>
						</view>
					</view>
				</view>


			</view>
		</z-paging>

	</view>
</template>
<script>
import {
	getTransactionsList,
	holderstop
} from '@/api/index.js'


export default {
	methods: {
		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 6);
			const end = key.slice(-6);
			return `${start}...${end}`;
		},
		currentHandle(num) {
			this.current = num
			// 显示加载中
			uni.showLoading({
				title: '加载中...', // 可选，设置加载框中的文本
				mask: true // 可选，设置是否显示透明蒙层，防止触摸穿透
			});
			if (num == 1) {
				this.getTransactionsListApi()
			} else if (num == 2) {
				this.holderstopApi()
			}
		},
		generateRandomString(length = 16) {
			const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // 字符集
			let result = '';
			for (let i = 0; i < length; i++) {
				const randomIndex = Math.floor(0.9319166415260236 * chars.length);
				result += chars[randomIndex];
			}
			return result;
		},
		/*  */
		formatTime(inputTime) {
			if (inputTime) {
				// 创建 Date 对象
				const date = new Date(inputTime);
				// 获取年份、月份、日期、小时和分钟
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以下个月份加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const formattedDate = `${year} ${month}-${day} ${hour}:${minute}`;
				return formattedDate
			} else {
				return ''
			}

		},
		async getTransactionsListApi() {
			let address = uni.getStorageSync('walletAddress')
			let type = this.type
			// console.log(type,"type");
			let data = {
				address,
				type
			}
			let res = await getTransactionsList(data)
			// 完成后隐藏加载框
			uni.hideLoading();

			if (res.data) {
				// this.list = res.data.transactions
				this.$refs.paging.complete(res.data.transactions);
			}
		},
		async holderstopApi() {
			console.log('holderstopApi');
			let res = await holderstop()
			// 完成后隐藏加载框
			uni.hideLoading();
			console.log(res, 'res');
			if (res.data) {
				// this.list = res.data.rank
				this.$refs.paging.complete(res.data.rank);
			}
		},
		async holderstopApi() {
			console.log('holderstopApi');
			let res = await holderstop()
			// 完成后隐藏加载框
			uni.hideLoading();
			console.log(res, 'res');
			if (res.data) {
				// this.list = res.data.rank
				this.$refs.paging.complete(res.data.rank);
			}
		},
		async getList() {
			let address = uni.getStorageSync('walletAddress');
			let type = this.type;
			if (this.current == 1) {
				let data = {
					address,
					type
				}
				let res = await getTransactionsList(data)
				this.$refs.paging.complete(res.data.transactions);
			} else if (this.current == 2) {
				let res = await holderstop()
				if (res.data) {
					// this.list = res.data.rank
					this.$refs.paging.complete(res.data.rank);
				}
			}
			// 完成后隐藏加载框
			uni.hideLoading();
		},
		goBack() {
			uni.navigateBack({})
		},
	},
	data() {
		return {
			list: [
				// {
				//   "amount": "100",        // 交易金额或数值，通常表示某种交易、订单的金额。
				//   "created_at": "2025-03-13T01:47:24.615Z",    // 创建时间，表示记录或对象创建的时间。
				//   "error_message": "", // 错误信息，通常在出现错误时，记录失败的原因或错误描述。
				//   "id": "",            // 唯一标识符，通常是该记录的唯一ID，用于区分不同的记录。
				//   "recipient": "",     // 接收者，表示交易或操作的接收方，可能是用户或系统。
				//   "signature": "",     // 签名，通常是数据的加密签名，用于验证数据的完整性或身份认证。
				//   "status": "success",        // 状态，表示当前记录的状态，例如“已完成”，“处理中”等。
				//   "type": 0,           // 类型，通常用于标识不同的操作类型或记录类型。数字值可能代表不同的类型。
				//   "updated_at": ""     // 更新时间，表示记录或对象最后一次更新的时间。
				// }
			],
			type: 1,
			current: 1,
		};
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type
		}
	},
	onShow() {
		// this.getTransactionsListApi()
	}
}
</script>
<style scoped lang="scss">
.active {
	background-color: #1F2630 !important;
}

.boxOne {
	// width: 100%;
	// height: 100rpx;
	// display: flex;
	// align-items: center;
	// padding-top: 30rpx;
	// background-color: #1f2630;

	height: 130rpx;
	background: #1f2630;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.leftOne {

		position: absolute;
		left: 2%;
		width: 22rpx;
		height: 38rpx;
		// margin-left: 28rpx;
	}

	.rightOne {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		// margin-left: 253rpx;
	}
}

.bpxTwoMath {
	// width: 100%;
	// height: calc(100vh - 100rpx);
	// background: #29313c;
	// height: 100vh;
}

.boxTwo {
	display: flex;
	justify-content: space-around;
	padding-top: 31rpx;

	.rankOne {
		text-align: center;

		.Rank {
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// margin-left: 35rpx;
		}

		.number {
			width: 68rpx;
			height: 43rpx;
			// margin-left: 24rpx;
			margin-top: 15rpx;
		}
	}

	.rankTwo {
		text-align: left;

		.Rank1 {
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// margin-left: 101rpx;
		}

		.math {
			font-size: 30rpx;
			color: #ffffff;
			//  margin-left: 65rpx;
			margin-top: 15rpx;
		}
	}

	.rankThree {
		text-align: left;

		.Rank2 {
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// margin-left: 101rpx;
		}

		.math1 {
			font-size: 30rpx;
			// color: #fcd434;
			// margin-left: 82rpx;
			margin-top: 15rpx;
		}

		.mathBlue {
			color: #2D7CFF;
		}

		.mathRed {
			color: #FF2424;
		}

		.mathYellow {
			color: #FCD434;
		}

	}

	.rankFour {
		.Rank3 {
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// margin-left: 160rpx;
		}

		.math2 {
			font-size: 30rpx;
			color: #ffffff;
			// margin-left: 57rpx;
			margin-top: 15rpx;
		}
	}
}
</style>